import React from 'react';
import { Input, Tooltip } from 'antd';
import ResultStyle from 'src/routers/Strategy/Strategy/Component/test/resultStyle';
import { getVariableValue } from 'src/utils/variable';
import './index.less';

export default function LabelInput(props) {
  const { isTxt, logs = {} } = props;
  const var_name = !props.var_name ? (props.value && props.value.var_name) || '' : props.var_name;
  const value = props.showCode ? var_name : var_name ? var_name : props.var_code;
  const requireErrorClass = props.isFocus && props.var_code === '' ? 'require-error' : '';

  return (
    <div className='label-input' style={props.isTxt ? { display: 'inline-block' } : {}}>
      {!isTxt ? (
        <>
          {var_name && props.var_code && <label title={props.disabled ? props.var_code : ''}>{props.var_code}</label>}
          {props.isInput ? (
            props.disabled ? (
              <Tooltip title={value}>
                <Input
                  value={value}
                  onChange={props.onChange}
                  placeholder={props.placeholder}
                  disabled={props.disabled}
                  style={props.style}
                />
              </Tooltip>
            ) : (
              <Input
                value={value}
                onChange={props.onChange}
                placeholder={props.placeholder}
                disabled={props.disabled}
                className={requireErrorClass}
                style={props.style}
              />
            )
          ) : (
            <div className='label-input-txt' />
          )}
        </>
      ) : (
        <>
          {Object.keys(logs).length > 0 ? (
            <ResultStyle
              top={value || props.placeholder}
              bottom={getVariableValue(
                { var_code: props.var_code, var_name: props.var_name, var_type: props.var_type },
                logs.variables
              )}
            />
          ) : (
            <span
              className={value ? 'label-txt' : 'label-txt placeholder'}
              style={value && props.color ? { color: props.color } : {}}
            >
              {value || props.placeholder}
            </span>
          )}
        </>
      )}
    </div>
  );
}
